<!-- 配送单详情 -->
<template>
	<view class="pages relative">
		<!-- 顶部 -->
		<view class="pages-top bgc-w boxShadow">
			<!-- 顶部导航 -->
			<g-pages-tab class="pages-tab bgc-w" :list="pagesTab" :index='ptIndex' @change="changePagesTab" />
		</view>
		<!-- 商品明细 -->
		<view class="" v-if="ptIndex==0">
			<view class="" style="width: 100%; height: 20rpx;"></view>
			<view class="pages-list bgc-w p-30" v-if="pagesLists&&pagesLists.length">
				<p-order-goods-item-sm class="  mb-20" v-for="(item,index) in pagesLists" :key="index" />
				<view class="">
					<text class="fs-sm">共 <text class="fc-warn">16</text>种 </text>
					<text class="fs-sm"> <text class="fc-warn">1188</text>个产品 </text>
				</view>
			</view>
			<view class="" v-else>
				<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
			</view>
		</view>

		<!-- 顾客明细 -->
		<view class="" v-if="ptIndex==1">
			<view class="pl-30 " style="width: 100%;line-height: 100rpx;">
				<text class="fs-sm">共 <text class="fc-warn">188</text>个顾客 </text>
				<text class="fs-sm"> <text class="fc-warn">188</text>个订单 </text>
			</view>
			<view class="pages-list " v-if="pagesLists&&pagesLists.length">
				<orderItem class="  mb-20" v-for="(item,index) in pagesLists" :key="index" />
			</view>
			<view class="" v-else>
				<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
			</view>
			<!-- 技术支持 -->
			<p-support class=""></p-support>
		</view>
	</view>
</template>

<script>
	import orderItem from './components/orderItem.vue'
	export default {
		components: {
			orderItem
		},
		data() {
			return {
				// 门店订单来源
				ptIndex: 0,
				//数据
				pagesLists: [1, 1, 1],
			};
		},
		onLoad() {},
		methods: {
			// 切换顶部导航索引
			changePagesTab(index) {
				this.ptIndex = index
			},
		},
		computed: {
			pagesTab() {
				return [{
					title: '商品明细',
				}, {
					title: '顾客明细'
				}, ]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.static {
		position: static;
	}

	.pages-top {
		width: 750rpx;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		z-index: 3;

		.pages-top-item {
			height: 100rpx;
			margin: 0 auto;
		}

		.pages-tab {
			height: 96rpx;
		}
	}

	.filter-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.filter-popup-box {
		// position: relative;
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;

		.btn-info {
			width: 300rpx;
			line-height: 80rpx;
		}

		.btn-ac {
			width: 300rpx;
			line-height: 80rpx;
		}

	}


	.msck {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pages-list-box {
		z-index: 1;
	}
</style>